<template>
	<view class="cate">
		<!-- 左侧一级分类区域 -->
		<scroll-view class="scroll-left" scroll-y="true" >
			<view :class="[index === activeFcateIndex ? 'active' : '']" v-for="(item, index) in goodsFcateList" :key="item.fcateid" @click="activeFcate(index, item.fcateid)">{{ item.fcatename }}</view>
		</scroll-view>
		<!-- 右侧二级分类区域 -->
		<scroll-view class="scroll-right" scroll-y="true" >
			<text>/分类详情/</text>
			<view>
				<view class="scategory" v-for="item in goodsScateList" :key="item.scateid" @click="gotoGoodsIntro(item)">
					<image :src="item.scateimg" class="scate-img"></image>
					<text>{{ item.scatename }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getGoodsFcategories()
		},
		data() {
			return {
				// 商品一级分类信息列表
				goodsFcateList: [],
				//商品二级分类信息列表
				goodsScateList: [],
				// 当前被激活的一级分类 默认为0
				activeFcateIndex: 0
			}
		},
		methods: {
			// 获取商品分类信息
			async getGoodsFcategories() {
				const { data: res } = await uni.$http.get('/goods/fcate')
				if(res.meta.status !== 200) return uni.showToast({
					title: '失败',
					icon: 'error',
					duration: 1000
				})
				this.goodsFcateList = res.recordset
				this.getGoodsScategories(this.goodsFcateList[0].fcateid)
			},
			// 一级分类标签被点击时触发
			activeFcate(index, id) {
				this.activeFcateIndex = index
				this.getGoodsScategories(id)
			},
			// 获取指定一级分类标签下的二级标签
			async getGoodsScategories(id) {
				const { data: res } = await uni.$http.get('/goods/scate', { id: id })
				if(res.meta.status !== 200) return uni.showToast({
					title: '失败',
					icon: 'error',
					duration: 1000
				})
				this.goodsScateList = res.recordset
			},
			// 当商品二级分类信息被点击时 跳转至商品列表页
			gotoGoodsIntro(val) {
				uni.navigateTo({
					url: `/subpages/goodslist/goodslist?cateid=${val.fcateid},${val.scateid}`
				})
			}
		}
	}
</script>

<style>
	.cate {
		display: flex;
		justify-content: space-between;
	}
	
	.scroll-left {
		width: 25%;
		background-color: #f8f8f8;
	}
	
	.scroll-right {
		width: 75%;
		padding: 30rpx;
	}
	
	.scroll-right text:first-child {
		font-weight: 700;
		font-size: 16px;
	}
	
	.scroll-right view:nth-child(2) {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	
	.scroll-left,
	.scroll-right{
		height: 100vh;
	}
	
	.scroll-left view {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
	}
	
	view.active {
		background-color: #fff;
	}
	
	.scategory {
		display: flex; 
		flex-direction: column;
		align-items: center;
		width: 30%;
		margin-top: 20rpx;
		padding: 8rpx;
	}
	
	.scategory text {
		font-size: 12px;
	}
	
	.scate-img {
		width: 140rpx;
		height: 140rpx;
		background-color: #007AFF;
	}
</style>
